<template>
  <div>
    <!-- 标题头 头像 -->
    <div id="mine">
      <van-nav-bar
        title="登录京东礼品卡"
        font-size-xs:20px
        @click-left="onClickLeft"
      >
        <template #left>
          <van-icon name="arrow-left" size="18" color="#333" />Back
        </template>
      </van-nav-bar>
    </div>
    <div class="dl">
      <p>登录</p>
    </div>
    <div>
      <van-form @submit="onSubmit">
        <van-field
          v-model="identifier"
          type="text"
          name="用户名"
          :placeholder="msg1"
          @blur="checkin"
          :style="{ border: border1 }"
        />
        <van-field
          v-model="lpwd"
          type="password"
          name="密码"
          :placeholder="msg2"
          @blur="checkpwd"
          :style="{ border: border2 }"
        />
        <div style="margin: 16px">
          <van-button
            style="font-size: 20px"
            color="linear-gradient(90deg,#fab3b3,#ffbcb3 73%,#ffcaba)"
            round
            block
            type="info"
            native-type="submit"
            >登&nbsp;录</van-button
          >
        </div>
      </van-form>
    </div>
    <div class="bodyer">
      <div class="footer">
        <p style="font-size: 16px">
          抱歉,我还没有账号信息
          <router-link to="/register" style="font-size: 20px"
            >申请注册</router-link
          >
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import { Post } from "../gp.js";
export default {
  data() {
    return {
      identifier: "",
      lpwd: "",
      msg1: "手机号/用户名/邮箱",
      msg2: "密码",
      border1: "",
      border2: "",
    };
  },
  mounted() {
    // if(this.$store.state.id==""&&sessionStorage.getItem("id")){
    //   // console.log("登录已刷新");
    //   // this.$router.push('/user');
    //   this.$store.commit('setId',sessionStorage.getItem("id"));
    //   this.$store.commit('setUname',sessionStorage.getItem("username"));
    //   this.$store.commit('setIslogin',sessionStorage.getItem("islogin"));
    //   let data={};
    //   data.lid=this.$store.state.id;
    //   console.log(data)
    //   Post('/user/details',data).then(result=>{
    //       console.log(result.data.data[0])
    //       let dlinfo=result.data.data[0];
    //       if(result.data.code == 200){
    //         this.userinfo=result.data.data;
    //         this.$store.commit('setWallet',dlinfo.wallet);
    //       }else{
    //         this.$toast("1未查询到用户");
    //       }
    //     })
    // }
  },
  methods: {
    onClickLeft() {
      this.$router.push("/home");
    },
    checkin(identifier) {
      identifier = this.identifier;
      if (!identifier) {
        this.msg1 = "请输入账号信息";
        this.border1 = "2px solid red";
        return false;
      } else {
        this.border1 = "1px solid rgb(175, 175, 170)";
        return true;
      }
    },
    checkpwd(lpwd) {
      lpwd = this.lpwd;
      if (!lpwd) {
        this.msg2 = "请输入密码";
        this.border2 = "2px solid red";
        return false;
      } else {
        //密码输入不为空
        this.border2 = "1px solid rgb(175, 175, 170)";
        return true;
      }
    },
    onSubmit() {
      let data = {
        identifier: this.identifier,
        lpwd: this.lpwd,
      };
      if (this.checkin(this.identifier) && this.checkpwd(this.lpwd)) {
        Post("/user/login", data).then((res) => {
          // 登录成功，更新vuex中的信息
          console.log(res.data);
          let userinfo = res.data;
          if (userinfo.code == 200) {
            let userinfo = res.data;
            this.$store.commit("setUname", userinfo.data.username);
            this.$store.commit("setIslogin", true);
            this.$store.commit("setId", userinfo.data.lid);
            this.$store.commit("setWallet", userinfo.data.wallet);
            // // 同时把数据存入webstorage   只能处理字符串
            sessionStorage.setItem("id", userinfo.data.lid);
            sessionStorage.setItem("islogin", "true");
            sessionStorage.setItem("username", userinfo.data.username);
            sessionStorage.setItem("wallet", userinfo.data.wallet);

            this.$router.push(`/${sessionStorage.getItem("navPath")}`);
          } else {
            this.$toast("用户名或密码错误");
          }
        });
      }
    },
  },
};
</script>

<style scoped>
#mine /deep/ .van-nav-bar__title {
  /* color: white !important; */
  font-size: 18px;
}
.dl {
  position: relative;
}
p {
  margin-top: 46px;
  display: inline-flex;
  position: absolute;
  left: 5vw;
  top: 5vh;
  font-size: 25px;
  width: 15vw;
}

.van-field {
  width: 85%;
  position: absolute;
  top: 25vh;
  left: 7.5%;
  padding: 0 auto;
  height: 7vh;
  border: 1px solid rgb(178, 178, 178);
  border-radius: 40px;
}
.van-form :nth-child(2) {
  margin-top: 60px;
}

::v-deep .van-field__control {
  height: 22px;
  font-size: 16px;
  background-color: none;
  margin: 0 auto;
  text-align: center;
}
::v-deep input:-internal-autofill-selected {
  background-color: none;
}
/* 登录按钮 */
.van-button {
  position: absolute;
  top: 43vh;
  left: 7.5%;
  width: 85vw;
  height: 7vh;
  border-radius: 40px;
}

.bodyer span {
  color: rgb(220, 213, 204);
  width: 40%;
  position: absolute;
  top: 55vh;
  left: 30%;
}
.tu {
  width: 100%;
  position: absolute;
  top: 65vh;
  left: 1%;
}
.footer {
  text-align: center;
  font-family: 微软雅黑, "Heiti SC", 黑体, Arial;
}
.footer p {
  width: 54%;
  display: block;
  color: rgb(178, 178, 178);
  position: absolute;
  top: 80vh;
  left: 23%;
  margin: 0;
  padding: 0;
}
.footer a {
  width: 54%;
  display: block;
  position: absolute;
  top: 5vh;
  left: 10vw;
  margin-top: 2px;
  color: rgb(74, 174, 237);
}
</style>
